<template>
    <view :style="{'--color': color}">
        <status-bar title='店铺详情' :goHome='fromShare'></status-bar>
        <view class="topBg p-re">
            <view class="back bg00 p-ab"></view>
            <view class="card thmeBg p-re white">
                <image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="img wh p-ab"></image>
                <view class="item d-flex j-sb a-center">
                    <view class="d-flex flex-1">
                        <image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="f-shrink-0"></image>
                        <view class="p-left20">
                            <view class="m-bot10">
                                <text class="label m-right10 d-inline-block">{{ pageData.bussName }}</text>
                                <text class="size28 bold">{{ pageData.name }}</text>
                            </view>
                            <view class="h6">{{ pageData.address }}</view>
                            <!-- 众筹 -->
                            <view class="d-flex a-end" v-if="getType == 2">
                                <view class="size22 m-right10">保证金：<text class="size36 m-right6">{{ pageData.earnest_money }}</text> 元</view>
                                <!-- <view class="btn flexac">缴纳</view> -->
                            </view>
                        </view>
                    </view>
                  <!--  <view class="text-center m-left20 zIndex" 
					@click="toUrl('/joinPage/noticeList?store_id=' + store_id)">
                        <text class="iconfont icon-qiyejianjie size40"></text>
                        <view class="size22">运营公告</view>
                    </view> -->
                </view>
            </view>
        </view>
        <view class="padding30">
            <view class="d-flex j-sb a-center m-bot30"> 
                <view class="size32 bold">订单/流水</view>
                <picker :value="date" mode="date" fields="month" :end="end" @change="dateChange">
                    <view>
                        <text class="size28 m-right10">{{ date }}</text>
                        <text class="iconfont icon-xiangxia1 bold"></text>
                    </view>
                </picker>
            </view>
            <view class="info bgf8 d-flex j-sa a-center">
                <view class="text-center">
                    <view class="size40 color_FOD">{{ pageData.mOrderNum }}</view>
                    <view class="size26 color_33">当月单量(单)</view>
                </view>
                <view class="text-center">
                    <view class="size40 color_FOD">{{ pageData.mOrderMoney }}</view>
                    <view class="size26 color_33">当月流水(元)</view>
                </view>
                <view class="text-center">
                    <view class="size40 color_FOD">{{ pageData.mIncome }}</view>
                    <view class="size26 color_33">当月收益(元)</view>
                </view>
            </view>
            <view class="list p-left20 p-right20">
                <view class="bot_bor_ee p-top30 p-bot30 line45" v-for="(item,index) in orderList" :key="index">
                    <view class="size28">订单号：{{ item.order_code }}</view>
                    <view class="size28">金额：￥{{ item.payMoney }}</view>
                    <view class="size28">时间：{{ item.addDate }}</view>
                </view>
            </view>
        </view>

        <emptys v-if="noData" title="暂无数据"></emptys>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        // 格式化时间戳
        const currentDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm')
        return {
            fromShare: 0,
            imgUrl: this.imgUrl,
            store_id: '',
            agent_id: '',
            getType: '', // 加盟1、众筹2、代理3
            date: currentDate,
            end: currentDate,
            getYear: '', 
            getMonth: '',
            pageData: '',
            orderList: [],
            noData: false,
            page: 1, // 第几页
            pageNum: 10, // 每页条数
            noMore: false // 没有更多
        }
    },
    computed: {
        ...mapState(['color'])
    },
    onLoad(e){
        console.log(e)
        if(e.fromShare) this.fromShare = e.fromShare
        if(e.store_id) this.store_id = e.store_id
        if(e.agent_id) this.agent_id = e.agent_id
        if(e.getType) this.getType = e.getType
        
        this.getYear = this.date.split('-')[0]
        this.getMonth = this.date.split('-')[1]
        this.getDetail()
    },
    methods: {
        dateChange(e){
            this.date = e.detail.value
            this.getYear = this.date.split('-')[0]
            this.getMonth = this.date.split('-')[1]
            this.noMore = false
            this.page = 1
            this.getDetail()
        },
        getDetail(){
            this.$http.post({
                url: '/osmxcxApi/getStoreOrderList',
                data: {
                    store_id: this.store_id,
                    agent_id: this.agent_id, // 代理需传
                    getYear: this.getYear, // 空为当前年
                    getMonth: this.getMonth, // 空为当前月
                    getType: this.getType,
                    page: this.page,
                    pageNum: this.pageNum
                }
            }).then(res=>{
                this.pageData = res.data.storeFind
                let result = res.data.orderList || []
                this.orderList = this.page == 1 ? result : this.orderList.concat(result)
                if(result.length < this.pageNum) this.noMore = true

                console.log('订单列表', this.orderList)

                if(this.orderList.length){
                    this.noData = false
                }else{
                    this.noData = true
                }
            })
        }
    },
    onReachBottom(){
        if(this.noMore) return
        this.page ++ 
        this.getDetail()
    }
}
</script>

<style lang="scss" scoped>
.topBg {
    padding: 30rpx 30rpx 0 30rpx;
    .back {
        width: 100%;
        height: calc(100% - 30rpx);
        left: 0;
        top: 0;
    }
    .card {
        padding: 30rpx 20rpx 30rpx 30rpx;
        z-index: 1;
        .img {
            top: 0;
            left: 0;
        }
        .item {
            image {
                width: 120rpx;
                height: 120rpx;
            }
            .label {
                padding: 4rpx 10rpx;
                background: #990000;
                border-radius: 10rpx;
                font-size: 22rpx;
                color: #fff;
            }
            .btn {
                width: 64rpx;
                height: 36rpx;
                background: #FF9900;
                font-size: 22rpx;
            }
        }
    }
}
.info {
    height: 120rpx;
}
.list {
    color: #515151;
}
</style>